/**
 * Form 组件的主题配置
 * 
 * 基于企业级设计规范 (Form.json) 的完整配置
 * 包含所有表单样式定义
 */

import type { ComponentToken } from 'antd/es/form/style';

// ========== 设计 Token 常量 ==========

/**
 * 标签相关 Token
 */
const LABEL_TOKENS = {
  // 颜色
  requiredMarkColor: '#ff4d4f',
  color: '#1a1a1a',
  
  // 字体
  fontSize: 14,
  
  // 高度
  height: 32,
} as const;

/**
 * 冒号相关 Token
 */
const COLON_TOKENS = {
  // 间距
  marginInlineStart: 2,
  marginInlineEnd: 8,
} as const;

/**
 * 表单项相关 Token
 */
const ITEM_TOKENS = {
  // 间距
  marginBottom: 24,
  
  // 行内布局间距
  inlineMarginBottom: 0,
} as const;

/**
 * 垂直布局相关 Token
 */
const VERTICAL_TOKENS = {
  // 标签内边距
  labelPadding: '0 0 4px',
  
  // 标签外边距
  labelMargin: 0,
} as const;

/**
 * Form 完整主题配置
 * 
 * 根据设计规范文件 Form.json 定义的企业级表单样式
 * 涵盖所有表单布局和状态的完整配置
 * 
 * @example
 * ```tsx
 * <ConfigProvider theme={{ components: { Form: formThemeConfig } }}>
 *   <Form layout="horizontal">
 *     <Form.Item label="用户名" name="username">
 *       <Input />
 *     </Form.Item>
 *     <Form.Item label="密码" name="password">
 *       <Input.Password />
 *     </Form.Item>
 *   </Form>
 *   
 *   <Form layout="vertical">
 *     <Form.Item label="邮箱" name="email">
 *       <Input />
 *     </Form.Item>
 *   </Form>
 * </ConfigProvider>
 * ```
 */
export const formThemeConfig: Partial<ComponentToken> = {
  // ========== 标签配置 ==========
  labelRequiredMarkColor: LABEL_TOKENS.requiredMarkColor,
  labelColor: LABEL_TOKENS.color,
  labelFontSize: LABEL_TOKENS.fontSize,
  labelHeight: LABEL_TOKENS.height,
  
  // ========== 冒号配置 ==========
  labelColonMarginInlineStart: COLON_TOKENS.marginInlineStart,
  labelColonMarginInlineEnd: COLON_TOKENS.marginInlineEnd,
  
  // ========== 表单项配置 ==========
  itemMarginBottom: ITEM_TOKENS.marginBottom,
  
  // ========== 垂直布局配置 ==========
  verticalLabelPadding: VERTICAL_TOKENS.labelPadding,
  verticalLabelMargin: VERTICAL_TOKENS.labelMargin,
};

/**
 * 获取 Form 主题配置
 * 
 * 支持部分覆盖默认配置，可以基于完整的设计规范进行定制
 * 
 * @param customConfig 自定义配置（可选）
 * @returns 合并后的主题配置
 * 
 * @example
 * ```tsx
 * // 基于设计规范的定制
 * const myFormTheme = getFormTheme({
 *   labelColor: '#333333',             // 自定义标签颜色
 *   labelFontSize: 16,                 // 自定义标签字体大小
 *   itemMarginBottom: 32,              // 自定义表单项间距
 * });
 * 
 * <ConfigProvider theme={{ components: { Form: myFormTheme } }}>
 *   <Form>
 *     <Form.Item label="字段">
 *       <Input />
 *     </Form.Item>
 *   </Form>
 * </ConfigProvider>
 * ```
 */
export const getFormTheme = (
  customConfig?: Partial<ComponentToken>
): Partial<ComponentToken> => {
  return {
    ...formThemeConfig,
    ...customConfig,
  };
};

/**
 * 导出 Form 组件的 Token 类型
 * 方便 TypeScript 类型检查和开发时的智能提示
 */
export type { ComponentToken as FormComponentToken } from 'antd/es/form/style';

